/*
 * @Author: 史许荣
 * @Date: 2022-08-01 10:57:57
 * @LastEditors: 史许荣
 * @LastEditTime: 2022-08-01 16:25:30
 * @Description: file content
 * @FilePath: \react-three-fiber-new\src\Cctv.js
 */
import React, { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Html } from '@react-three/drei'

export default function Cctv({ name, position }) {
    const ref = useRef()
    useFrame((state) => {
        const t = state.clock.getElapsedTime()
        
        ref.current.quaternion.copy(state.camera.quaternion)
        ref.current.position.y = (position[1] + Math.sin(t / 1)/3) 
      })
    return (<group ref={ref} position={position}>
            <mesh>
            <Html transform position={[0,0,-2]} zoom={10} rotation={[  0, 0, 0]}>
                    <div className={'Cctv'}>
                        <div></div>
                        <div>{name}</div>
                    </div>
                </Html>
            </mesh>
        </group>
    )
}